$duration: 1s;

.block.vivify {
  .title,.content {
    opacity: 0;
  }
}
@for $i from 1 through 5 {
  .block-visible.block.__item.__item-#{$i} {
    .title,.content {
      opacity: 0;
      animation-iteration-count: 1;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      animation-name: visible_fn;
      animation-duration: $duration;
    }
    .title {
      animation-delay: (($i * 2) * $duration - 1) - $duration;
    }
    .content {
      animation-delay: (($i * 2) * $duration) - $duration;
    }
  }
}

@keyframes visible_fn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
//.block.__item {
//  .title {
//    opacity: 0;
//    animation-iteration-count: 1;
//    animation-timing-function: linear;
//    animation-fill-mode: forwards;
//    animation-name: visible_fn;
//    animation-duration: $duration;
//  }
//  .content {
//    opacity: 0;
//    animation-iteration-count: 1;
//    animation-timing-function: linear;
//    animation-fill-mode: forwards;
//    animation-name: visible_fn;
//    animation-duration: $duration;
//  }
//}
//
//.block.__item.__item-1 {
//  .title {
//    animation-delay: 1s;
//  }
//  .content {
//    animation-delay: 2s;
//  }
//}
//
//.block.__item.__item-2 {
//  .title {
//    animation-delay: 3s;
//
//  }
//  .content {
//    animation-delay: 4s;
//  }
//}
//
//.block.__item.__item-3 {
//  .title {
//    animation-delay: 5s;
//
//  }
//  .content {
//    animation-delay: 6s;
//  }
//}
//
//.block.__item.__item-4 {
//  .title {
//    animation-delay: 7s;
//
//  }
//  .content {
//    animation-delay: 8s;
//  }
//}
//
//.block.__item.__item-5 {
//  .title {
//    animation-delay: 9s;
//
//  }
//  .content {
//    animation-delay: 10s;
//  }
//}

